* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), url('../font/iconfont.woff2') format('woff2'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: #fff;
}

body {
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background-color: #fafafc;
}

.header {
    display: flex;
    /* 固定定位跟父亲没有关系 它以屏幕为准 */
    position: fixed;
    top: 0;
    /* 感觉这三行可有可无，并不影响布局 */
    /* left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
    width: 100%;
    max-width: 540px;
    z-index: 10;
    background-color: transparent;
}

.header .search {
    position: relative;
    flex: 1;
    margin: 8px 12px;
    padding-left: 30px;
    height: 28px;
    line-height: 28px;
    color: #666;
    border-radius: 14px;
    background-color: #fff;
}

.header .search::before {
    position: absolute;
    content: '';
    left: 10px;
    top: 7px;
    height: 14px;
    width: 14px;
    background: url(../images/home-common-sprite.png) no-repeat 0px 0px;
    background-size: 20px auto;
}

.header .user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 44px;
    font-size: 12px;
    color: #fff;
}

.header .user::before {
    content: '';
    height: 20px;
    width: 20px;
    background: url(../images/home-common-sprite.png) no-repeat -1px -35px;
    background-size: 20px auto;
}

.main {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.main .main_pic {
    height: 230px;
    width: 100%;
    background: url(../upload/mian.jpg) no-repeat;
    background-size: 100% 100%;
}

.nav {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-top: -35px;
    border-radius: 10px;
    z-index: 5;
}

.nav ul {
    display: flex;
    width: 100%;
}

.nav ul li {
    flex: 1;
    padding: 5px 0;
    list-style: none;
}

.nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #000;
}

.nav .nav_icon {
    width: 40px;
    height: 40px;
}

.nav ul li:nth-child(1) .nav_icon {
    background: url(../images/home-fivemain-sprite.png) no-repeat 0 0px;
    background-size: 40px auto;
}

.nav ul li:nth-child(2) .nav_icon {
    background: url(../images/home-fivemain-sprite.png) no-repeat 0 -40px;
    background-size: 40px auto;
}

.nav ul li:nth-child(3) .nav_icon {
    background: url(../images/home-fivemain-sprite.png) no-repeat 0 -80px;
    background-size: 40px auto;
}

.nav ul li:nth-child(4) .nav_icon {
    background: url(../images/home-fivemain-sprite.png) no-repeat 0 -120px;
    background-size: 40px auto;
}

.nav ul li:nth-child(5) .nav_icon {
    background: url(../images/home-fivemain-sprite.png) no-repeat 0 -160px;
    background-size: 40px auto;
}

.system_chose {
    overflow: hidden;
    margin-top: 10px;
    font-size: 14px;
    border-radius: 5px;
}

.system_chose .house {
    display: flex;
    height: 70px;
    background: linear-gradient(to right, #fb5a57, #fb8550);
}

.system_chose a[class] {
    display: flex;
    align-items: center;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}

.system_chose .house .hotel {
    flex: 31%;
    justify-content: flex-start;
    padding-left: 20px;
    background: url(../images/grid-nav-items-hotel@v7.15.png) no-repeat bottom right;
    background-size: 70px auto;
}

.system_chose .house .life_house {
    flex: 23%;
    justify-content: center;
    background: url(../images/grid-nav-items-minsu@v7.15.png) no-repeat bottom left;
    background-size: 37px auto;
}

.system_chose .house .special_offer {
    flex: 46%;
    justify-content: center;
    border-right: none;
    background: linear-gradient(to right, #ffbc49, #ffd252);
}

.system_chose .house .special_offer span {
    display: block;
    text-align: center;
    height: 100%;
    width: 100%;
    line-height: 70px;
    color: #a05416;
    background: url(../images/grid-nav-items-hot.png) no-repeat bottom right;
    background-size: 100% auto;
}

.system_chose .ticket {
    display: flex;
    height: 70px;
    background: linear-gradient(to right, #4b8fed, #53bced);
}

.system_chose .choseBox a[class]:first-child {
    flex: 31%;
}

.system_chose .choseBox a[class]:nth-child(n+2) {
    flex: 23%;
}

.choseBox .plain {
    justify-content: flex-start;
    padding-left: 20px;
    background: url(../images/grid-nav-items-flight@v7.15.png) no-repeat bottom right;
    background-size: 70px auto;
}

.choseBox .train {
    justify-content: center;
    background: url(../images/grid-nav-items-train.png) no-repeat bottom left;
    background-size: 37px auto;
}

.choseBox .bus {
    justify-content: center;
}

.choseBox .car {
    justify-content: center;
    border-right: none;
}

.system_chose .choseBox a[class]:first-child {
    flex: 31%;
}

.system_chose .choseBox a[class]:nth-child(n+2) {
    flex: 23%;
}

.system_chose .trip {
    display: flex;
    height: 70px;
    background: linear-gradient(to right, #34c2aa, #6cd557);
}

.choseBox .lvyou {
    justify-content: flex-start;
    padding-left: 20px;
    background: url(../images/grid-nav-items-travel@v7.15.png) no-repeat bottom right;
    background-size: 70px auto;
}

.choseBox .sijia {
    justify-content: center;
    background: url(../images/grid-nav-items-dingzhi@v7.15.png) no-repeat bottom left;
    background-size: 47px auto;
}

.choseBox .youlun {
    justify-content: center;
}

.choseBox .dingzhi {
    justify-content: center;
    border-right: none;
}

.trip a[class] {
    border-bottom: none;
}

.choseBox a[class]:last-child {
    border-right: none;
}

.foot_nav {
    margin-top: 10px;
}

.foot_nav ul {
    display: flex;
    flex-wrap: wrap;
}

.foot_nav ul li {
    flex: 20%;
    list-style: none;
}

.foot_nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    text-align: center;
    color: #000;
}

.foot_nav ul li .foot_nav_icon {
    height: 28px;
    width: 28px;
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 0;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(2) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -28px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(3) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -56px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(4) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -84px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(5) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -112px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(6) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -140px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(7) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -168px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(8) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -196px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(9) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -224px;
    background-size: 28px auto;
}

.foot_nav ul li:nth-child(10) .foot_nav_icon {
    background: url(../images/un_ico_subnav2x@v7.33.png) no-repeat 0 -252px;
    background-size: 28px auto;
}
.footer {
    margin-bottom: 20px;
}
.tool_cn {
    margin-top: 10px;
    background-color: #fff;
    border-top: 1px solid #c2c2c2;
}
.tool_cn ul {
    display: flex;
}

.tool_cn ul li {
    flex: 1;
    list-style: none;
}
.tool_cn ul li a {
    display: flex;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #333;
}
.tool_cn ul li a span {
    margin-bottom: 5px;
}
.tool_ver {
    margin: 10px 0;
    height: 14px;
}
.tool_ver {
    text-align: center;
}
.tool_ver a {
    font-size: 12px;
    color: #333;
    line-height: 14px;
}
.tool_text {
    text-align: center;
    font-size: 12px;
    color: #c2c2c2;
}